<template>
  <div v-show="!isSearch" class="category">
    <div class="cate_header">
      <TopSearch v-model="isSearch"></TopSearch>
    </div>
    <div class="cate_content">
      <div class="content_left">
        <el-scrollbar ref='scrollbarRef'>
          <van-sidebar v-model="active" scrollspy>
            <van-sidebar-item
              :url="'#abc' + index"
              v-for="(item, index) in categoryList"
              :key="item.id"
              @click="actHandler(index)"
              :title="item.title"
            />
          </van-sidebar>
        </el-scrollbar>
      </div>
      <div class="content_right">
        <el-scrollbar @scroll="scrollHandler">
          <div
            class="content_one"
            v-for="(item, index1) in categoryList"
            :key="index1"
            :id="'abc' + index1"
          >
            <router-link
              :to="`/care?categoryId=${item.id}&title=${item.title}`"
            >
              <div class="one_top">
                <div :class="['title', index1 == active && 'active']">
                  {{ item.title }}
                </div>
                
                <van-icon class="duigou" color="#c6c6cc" size="15" name="arrow"></van-icon>
              </div>
            </router-link>
            <div class="one_btm">
              <div
                class="yinyue"
                v-for="(item2, index) in item.subCategories[0].metadataValues"
                :key="item2.id"
                @click="goCartHandler(item, item2, index)"
              >
                {{ item2.displayName }}
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
  <Search v-show="isSearch" v-model="isSearch"></Search>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import categoryApi from "../../api/category/index";
import { QueryObject } from "../../api/category/type";
import { ref } from "vue";
import { useRouter } from "vue-router";
import TopSearch from "../charts/components/TopSearch/TopSearch.vue";
import Search from "../charts/components/Search/Search.vue";
let isSearch = ref(false);
const router = useRouter();

const categoryList = ref<QueryObject[]>([]);

const active = ref(0);

onMounted(async() => {
  await getCategoryList();
  getContentHeight();
  window.addEventListener('scroll',getContentHeight);
});

//获取左侧数据的功能函数
const getCategoryList = async () => {
  let result = await categoryApi.reqCateList();
  categoryList.value = result.data;
};

//点击左侧回调
const actHandler = (index: number) => {
  active.value = index;
};

//点击跳转页面
const goCartHandler = (item: any, item2: any, index: number) => {
  router.push({
    path: `/cart`,
    query: {
      categoryId: item.id,
      displayName: item2.displayName,
      index,
    },
  });
};




//范腾龙写
const scrollbarRef = ref()
const scrollHandler=()=>{
  getContentHeight();
};




const getContentHeight=()=>{
  let arr=document.querySelectorAll('.content_one');
  let NewArr=Array.from(arr);
  NewArr.forEach((item,index)=>{
    if(item.getBoundingClientRect().top-60<=120){
      console.log(index);
      active.value=index;
      scrollbarRef.value!.setScrollTop(index*60)
    }
  })
  
}










</script>

<style lang="less" scoped>
.category {
  width: 100%;
  height: 100vh;
  a {
    color: #333;
  }
  .cate_header {
    width: 100%;
    position: absolute;
    z-index: 2;
    background: #fff;
    // height: 50px;
    border-bottom: 6px solid #f0f0f0;
  }
  .cate_content {
    display: flex;
    height: 100% ;
    padding-top: 65px;
    box-sizing: border-box;
    .content_left {
      width: 90px;
      height: 100%;
      flex-shrink: 0;
      .van-sidebar-item--select:before{
        background: red;
        height: 100%;
      }
    }
    .content_right {
      flex-grow: 1;
      .content_one {
        height: 120px;
        .one_top {
          position: relative;
          height: 60px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f1f1f1;
          .title {
            font-weight: bold;
            font-size: 16px;
            padding-left: 10px;
            &.active {
              color: red;
            }
          }
          .duigou {
            color: #6a6969;
            position: absolute;
            left: 230px;
          }
        }
        .one_btm {
          height: 60px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          font-size: 14px;
          color: #7e8c8d;
          .yinyue {
            padding-left: 10px;
          }
          .kecheng {
            margin-left: 15px;
          }
          .zhubo {
            margin-left: 15px;
          }
        }
      }
    }
  }
}
</style>
